<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Drag n'Drop</title>
		<style type="text/css">
			body{
				font-family:Arial;
				font-size:0.8em;
				font-size:4em;
				}
			
			div	{
				position:absolute;
				cursor:default;
				}
			
			ul	{
				list-style:none;
				padding:0;
				margin:50px;
				}
			li	{
				padding:10px;
				width:100px;
				cursor:default;
				}
			li:hover
				{
				outline:1px solid red;
				}
			li:active
				{
				outline:3px solid yellow;
				}
			div.drag-target
				{
				width:100px;
				height:100px;
				background:gray;
				}
			#output
				{
				border:3px solid black;
				position:absolute;
				top:0;
				left:0;
				display:none;
				opacity:0.5;
				}
			#output.on
				{
				display:block;
				}
		</style>
		<script type="text/javascript" src="../../current/1.6.18.25/core.js"></script>
		<script type="text/javascript" src="drag-drop.js"></script>
		<script type="text/javascript">
			
			function $(o){return typeof(o)=="string"?document.getElementById(o):o;}
				
				
			var CSS={
				get:function(prop){
					document.defaultView.getComputedStyle(o,null).getPropertyValue("background-color")
				}
			}			
				
				
				
			window.onload=function(){
			
				var d = new DD(	[$('b0'),$('b1'),$('b2'),$('b3'),$('d1'),$('d2'),$('d3'),$('d4'),$('d5'),$('d6')] )

				d.onCollision=function(o,t){
					t.style.border="5px solid black";
					t.style.margin="-5px";
				}
				d.onNotCollision=function(o,t){
					if(t){
						t.style.border="0";
						t.style.margin="0";
					}
				}
				d.onDrop=function(o,hasCollision,t){
					if(hasCollision){
						o.parentNode.removeChild(o);
						for(var i=0,b;b=t[i];i++){
							b.style.backgroundColor = ;
							b.style.border="";
							b.style.margin="";
						}
					}
					
					//return false;
				}

			}
						
			
			
			
			
			
					
		
		</script>
	</head>
	<body>
		<ul>
			<li id="b0" style="background-color:red;">1</li>
			<li id="b1" style="background-color:yellow;">2</li>
			<li id="b2" style="background-color:green;">3</li>
			<li id="b3" style="background-color:blue;">4</li>
		</ul>
		
		<div id="d1" class="drag-target" style="background-color:purple;top:200px;left:600px;">A</div>
		<div id="d2" class="drag-target" style="top:200px;left:710px;">B</div>
		<div id="d3" class="drag-target" style="top:310px;left:600px;">C</div>
		<div id="d4" class="drag-target" style="top:310px;left:710px;">D</div>
		
		<div id="d5" class="drag-target" style="top:10px;left:600px;">E</div>
		<div id="d6" class="drag-target" style="top:10px;left:710px;">F</div>
		
		<div id="output">#output</div>
		
	</body>
</html>
